<template>
	<div class="container">
		<div>
			<div>
				<el-input v-model="MenuName" style="width: 240px" placeholder="请输入菜单名">
					<template #append>
						<el-button :icon="Search" @click="cha()" />
					</template>
				</el-input>

			</div>

			<el-table :data="tableData" :border="true" style="width: 100%">
				<el-table-column prop="Id" label="Id" />
				<el-table-column prop="ProjectName" label="项目名称" />
				<el-table-column prop="Period" label="项目周期" />
				<el-table-column prop="BusinessName" label="业务类型" />
				<el-table-column prop="CustomerName" label="客户" />
				<el-table-column prop="LeaderName" label="项目负责人" />
				<el-table-column prop="CreateTime" label="创建时间" min-width="120" />
				<el-table-column prop="CompletedStatusName" label="项目状态" />
				<el-table-column label="操作" min-width="120">
					<template #default="scope">
						<el-button v-if="scope.row.CompletedStatus == 0" type="primary" size="small" plain
							@click="showAllot(scope.row.Id)">工序分配</el-button>
						<el-button size="small" @click="showTimeline(scope.row.Id)">查看工序</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="demo-pagination-block">
				<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
					:page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
					layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
			<el-drawer destroy-on-close v-model="allotVisible" width="900" draggable>
				<procedure-allot :id="Id" @onSave="closeAllot"></procedure-allot>
			</el-drawer>
			<el-dialog destroy-on-close v-model="timelineVisible">
				<Timeline :id="Id" @onSave="closeTimeline"/>
			</el-dialog>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import {type ComponentSize } from 'element-plus'
	import { Search } from '@element-plus/icons-vue'
	import projectInfoapi from '../../api/projectInfoapi';
	import ProcedureAllot from './ProcedureAllot.vue'
	import Timeline from './Timeline.vue';

	const Id = ref(0);
	const MenuName = ref("")
	const tableData = ref([]);
	const total = ref(0);
	const pageSize = ref(10);
	const pageIndex = ref(1);

	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)

	const getdata = (MenuName: string = "", PageSize: number = 10, PageIndex: number = 1) => {
		var query = {
			MenuName: MenuName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		projectInfoapi.query(query).then((res: any) => {
			tableData.value = res.data
			total.value = res.total;
			console.log(res);
			
		}).catch((err: any) => {
			console.log("err=>", err);
		})
	}

	const cha = () => {
		getdata(MenuName.value);
	}

	// 工序分配
	const allotVisible = ref(false)
	const showAllot = (id: number) => {
		Id.value = id
		allotVisible.value = !allotVisible.value
	}
	const closeAllot = () => {
		allotVisible.value = !allotVisible.value
		getdata()
	}

	// 工序时间线
	const timelineVisible = ref(false);
	const showTimeline = (id:number)=>{
		timelineVisible.value = !timelineVisible.value;
		Id.value = id;
	}
	const closeTimeline = ()=>{
		timelineVisible.value = !timelineVisible.value;
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	}


	onMounted(() => {
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	})

	const handleSizeChange = (val: number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val: number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	}


</script>
<style scoped>
	.container{
		height: 100%;
	}
	.container>div {
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 1rem 0;
	}

	.container>div>:nth-child(2) {
		flex-grow: 1;
	}
</style>